<template>
  <view>
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      :indicator-dots="indicatorDots"
      :circular="circular"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      @change="changeImg"
    >
      <swiper-item
        v-for="(item, index) in imgList"
        :key="index"
      >
        <view class="swiper-item" @click="onClick(item)">
          <image
            :src="item.url"
            mode="aspectFill"
            class="img"
          />
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    imgList: {
      type: Array,
      default() {
        return [];
      },
    },
    height: {
      type: Number,
      default: 200,
    },
    currentShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      //swiper轮播图
      indicatorDots: false, //是否显示面板指示点
      circular: false, //是否采用衔接滑动
      autoplay: true, //是否自动切换
      interval: 3000, //自动切换时间间隔
      duration: 1000, //滑动动画时长
      current: 1, //当前所在滑块
    };
  },
  computed: {
    currentLength() {
      return this.imgList.length;
    },
  },
  methods: {
    changeImg(event) {
      // console.log('changimg', event);
      this.current = event.detail.current + 1;
    },
    onClick(index) {
      this.$emit('click', index);
    },
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 170rpx;
  .swiper-item {
    height: 170rpx;
  }
  .img {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }
}
.current {
  position: absolute;
  right: 30upx;
  top: 230rpx;
  color: #fff;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  width: 100upx;
  height: 42upx;
  line-height: 42upx;
  text-align: center;
  opacity: 0.9;
  font-size: 24upx;
}
</style>
